<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style media="screen">

    div.transform{
      height:100px;
      width:200px;
      color:white;
      background-color:red;
      /* rotate顺时针旋转几度 */
      transform:rotate(90deg);
      /* margin-top:50px;
      margin-left:-50px; */
    }

    div.border-radius{
      height:100px;
      width:200px;
      color:white;
      background-color:blue;
      /* 圆角的像素 */
      border-radius:20px;
      /* margin-left:50px;
      margin-top:-150px; */
    }
    div.border-radius2{
      height:100px;
      width:200px;
      color:white;
      background-color:blue;
      /* 圆角的像素 */
      border-radius:5px 50px 5px 50px;
      /* border-top-left-radius:2em;
      border-top-right-radius:2em;
      border-bottom-right-radius:2em;
      border-bottom-left-radius:2em; */
      /* margin-left:50px;
      margin-top:-150px; */
    }
    div.box-shadow{
      height:100px;
      width:200px;
      color:white;
      background-color:blue;
      /* 水平宽度 ,垂直高度, 阴影大小 ,颜色*/
      box-shadow:10px 10px 5px #888888
    }
  </style>
  <body>
    <div class="transform">
      transfrom旋转
    </div>
    <div class="border-radius">
      border-radius圆角
    </div>
    <div class="border-radius2">
      border-radius圆角
    </div>
    <div class="box-shadow">
      box-shadow阴影
    </div>
  </body>
</html>
